<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <style>

        .dd {
            width:100px;
            height:100px;
            background:red;
        }

        /*
        功能:
            与hover配合使用, 可以达到过渡的效果.
        */
        .transition {
            /*
            说明:
                1. 第一个参数表示过渡的参数, 第二个为过渡所需要的时间;
                2. 需要注意的是, 过渡的开始的值和结束的值必须是一个确定的值, 否则过渡无效.
                    - 测试时, 改为100%是可以的, 但是改为auto就不行了.
                3. 如果过渡多个属性, 每个参数之间用逗号隔开.
            */
            transition: width 2s, height 2s, transform 2s;
            -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
        }

        /*
        功能:
            这样相当于用css实现了鼠标移入后出发的事件
        */
        .dd:hover {
            width:200px;
            height: 200px;
            -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
            transform: rotate(180deg);
        }

    </style>
</head>
<body>
<div class="dd transition">鼠标移入观察效果</div>
</body>
</html>